<template>
  <div>TestCreateForm</div>
  <form-create :rule="rule" :option="options" v-model="formData" v-model:api="fApi"></form-create>
</template>
<script setup lang="ts" name="TestCreateForm">
import { ref } from "vue";

const fApi = ref({});
const formData = ref({});
const options = ref({
  submitBtn: {
    show: true,
    innerText: "提交"
  },
  resetBtn: {
    show: true,
    innerText: "重置"
  },
  //表单提交事件
  onSubmit: function (formData) {
    console.log(JSON.stringify(fApi.value.config));
    console.log(JSON.stringify(fApi.value.rule));
    console.log(JSON.stringify(fApi.value.form));
    alert(JSON.stringify(formData));
  }
});
const rule = ref([
  {
    type: "input",
    title: "商品名称",
    field: "goods_name",
    value: "iphone 7",
    col: {
      span: 12,
      labelWidth: 150
    },
    props: {
      type: "text"
    },
    validate: [{ required: true, message: "请输入goods_name", trigger: "blur" }]
  },
  {
    type: "checkbox",
    title: "标签",
    field: "label",
    value: ["1", "2", "3"],
    options: [
      { value: "1", label: "好用", disabled: true },
      { value: "2", label: "方便", disabled: false },
      { value: "3", label: "实用", disabled: false },
      { value: "4", label: "有效", disabled: false }
    ]
  }
]);
</script>

<style scoped></style>
